<template>
  <uni-popup ref="popupBullet" type="center" :is-mask-click="props.option.click">
    <view  class="bullet-box">
      <view class="img-box">
        <img :src="props.option.img" style="width:100%;height:100%">
      </view>
      <view class="title" v-if="props.option.title" v-html="props.option.title"></view>
      <view class="sub-title" v-if="props.option.subTitle">{{props.option.subTitle}}</view>
      <view class="btn-box">
        <slot></slot>
      </view>
      <view class="btn-close">
        <image src="https://img.qumoyugo.com/webimgbg/pets-icon-close-white-cirle_n.svg" style="width: 100%; height: 100%" @click="close"></image>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue'
const popupBullet = ref(null)
const props = defineProps({
  option: {
    type: Object,
    default: () => {
      return {
        title: '',
        subTitle: '',
        img: ''
      }
    }
  }
})
const show = () => {
  popupBullet.value.open()
}
const close = () => {
  popupBullet.value.close()
}
defineExpose({
  show,
  close
})
</script>

<style scoped lang="scss">
.bullet-box{
  width: 560rpx;
  min-height: 400rpx;
  border-radius: 30rpx;
  background: #FFF8F0;
  padding: 160rpx 24rpx 40rpx 24rpx;
  position: relative;
  color: #333;
  font-size: 36rpx;
  text-align: center;
  position: fixed;
  top: 30vh;
  left: 50%;
  transform: translateX(-50%);
  .btn-box{
    margin-top: 50rpx;
    padding: 0 16rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .sub-title{
    font-size: 28rpx;
    margin-top: 20rpx;
  }
  .img-box{
    position: absolute;
    width: 260rpx;
    height: 200rpx;
    top: -68rpx;
    left: 50%;
    transform: translateX(-50%);
  }
  .btn-close{
    position: absolute;
    width: 70rpx;
    height: 70rpx;
    bottom: -130rpx;
    left: 50%;
    transform: translateX(-50%);
  }
  .title{
    font-weight: bold;
    font-size: 32rpx;
    color: #414141;
    line-height: 48rpx;
    text-align: center;
  }
}
</style>
